<template>
  <div class="flex1">
    <div class="operation-item gui-paddingn flex justify-between">
      <div>
        <a href="/note/base" class="gda-btn gda-btn-primary" target="_blank">
          <i class="iconfont icon-tianjia- mr5"></i>添加课程
        </a>
        <nuxt-link to="/admin/notecode" class="gda-btn gda-btn-primary pointer ml10">
          <i class="iconfont icon-describe mr5"></i>兑换码管理
        </nuxt-link>
      </div>
      <div>
        <input class="binput mr10" type="text" placeholder="请输入标题" @blur="handleSearchCategory"  v-model="queryParams.keyword"/>
        <select class="binput mr10" v-model="queryParams.channelId" @change="handleSearchCategory" >
          <option :value="0">--请选择--</option>
          <option v-for="item in channelList" :value="item.id">{{item.title}}</option>
        </select>
        <select class="binput mr10" v-model="queryParams.categoryId" @change="handleSearchCategory">
          <option :value="0">--请选择--</option>
          <option v-for="item in categoryList" :value="item.id">{{item.title}}</option>
        </select>
        <select class="binput" v-model.number="queryParams.status" @change="handleSearchCategory">
          <option :value="-1">--请选择--</option>
          <option :value="1">上架</option>
          <option :value="0">下架</option>
        </select>
      </div>
    </div>
    <div class="gui-padding">
      <div>
        <table class="k-data-table-table w100" style="table-layout: auto;">
          <thead class="n-data-table-thead">
          <tr class="n-data-table-tr">
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">封面</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">信息</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">网盘</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">栏目/分类</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">上下架</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">展示</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">完结</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">评论</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">置顶</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">公众号</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">章节</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">操作</div>
              </div>
            </th>
          </tr>
          </thead>
          <tbody class="n-data-table-tbody">
          <template v-for="(item,index) in dataList">
            <tr class="n-data-table-tr">
              <td>
                  <ksd-uploader v-model="item.img" @success="handleUpdateStatus(item,'img','img')" ></ksd-uploader>
              </td>
              <td >
               <div class="flex align-center">
                 <input v-model="item.title" @blur="handleUpdateStatus(item,'title','title')"  class="binput flex1 fw" placeholder="请填写"/>
                 <input v-model="item.sorted" @blur="handleUpdateStatus(item,'sorted','sorted')" style="width: 48px;text-align: center;margin-left: 5px" class="binput  fw" placeholder="排序"/>
                 <a href="javascript:void(0);" class="ml5 fz11" @click="item.expand=!item.expand">{{item.expand?"收起":"查看"}}</a>
               </div>
              </td>
              <td>
                <div class="flex mt5">
                  <input v-model="item.panLink" style="width:60px;text-align: center;margin-right: 5px" @blur="handleUpdateStatus(item,'pan_link','panLink')" class="binput w50" placeholder="请填写"/>
                  <input v-model="item.panPwd"  style="width:50px;text-align: center" @blur="handleUpdateStatus(item,'pan_pwd','panPwd')" class="binput w50" placeholder="请填写"/>
                </div>
              </td>
              <td>
                <div class="flex">
                  <select class="binput"  style="width: 148px;" v-model.number="item.channelId" @change="handleChangeSelect(item,'channel_id','channelId','channelName')">
                    <option value="">--请选择--</option>
                    <template v-for="item in channelList">
                      <option :value="item.id">{{item.title}}-{{item.id}}</option>
                    </template>
                  </select>
                  <select class="binput ml5" style="width: 118px;" v-model.number="item.categoryId" @change="handleChangeSelect2(item,'category_id','categoryId','categoryName')">
                    <option value="">--请选择--</option>
                    <template v-for="citem in item.categoryListFilter">
                      <option :value="citem.id">{{citem.title}}</option>
                    </template>
                  </select>
                </div>
              </td>
              <td>
                <select class="binput" v-model.number="item.status" @change="handleUpdateStatus(item,'status','status')">
                  <option :value="1">上架</option>
                  <option :value="0">下架</option>
                </select>
              </td>
              <td>
                <select class="binput" v-model.number="item.showFlag" @change="handleUpdateStatus(item,'show_flag','showFlag')">
                  <option :value="1">展示</option>
                  <option :value="0">不展示</option>
                </select>
              </td>
              <td>
                <select class="binput" v-model.number="item.finished" @change="handleUpdateStatus(item,'finished','finished')">
                  <option :value="1">是</option>
                  <option :value="0">否</option>
                </select>
              </td>
              <td>
                <select class="binput" v-model.number="item.commentFlag"
                        @change="handleUpdateStatus(item,'comment_flag','commentFlag')">
                  <option :value="1">允许</option>
                  <option :value="0">禁止</option>
                </select>
              </td>
              <td>
                <select class="binput" v-model.number="item.pushFlag" @change="handleUpdateStatus(item,'push_flag','pushFlag')">
                  <option :value="1">推荐</option>
                  <option :value="0">不推荐</option>
                </select>
              </td>
              <td>
                <select class="binput" v-model.number="item.opengz" @change="handleUpdateStatus(item,'opengz','opengz')">
                  <option :value="1">开启</option>
                  <option :value="0">不开启</option>
                </select>
              </td>
              <td>
                <select class="binput" v-model.number="item.chapterFlag"
                        @change="handleUpdateStatus(item,'chapter_flag','chapterFlag')">
                  <option :value="1">无章</option>
                  <option :value="2">有章</option>
                </select>
              </td>
              <td colspan="1" rowspan="1" data-col-key="operator"
                  class="n-data-table-td n-data-table-td--last-col n-data-table-td--last-row">
                <div class="flex align-center">
                  <div v-if="item.chapterFlag == 1">
                    <a :href="'/note/page/'+item.id" target="_blank" class="mr3 green"><i
                        class="iconfont icon-bianji mr3"></i>预览
                    </a>
                  </div>
                  <div v-if="item.chapterFlag == 2">
                    <a :href="'/note/detail/'+item.id" target="_blank" class="mr3 green"><i
                        class="iconfont icon-bianji mr3"></i>预览
                    </a>
                  </div>
                  <div v-if="item.chapterFlag == 1">
                    <a :href="'/note/base?id='+item.id" target="_blank" class="mr3 green"><i
                        class="iconfont icon-bianji mr3"></i>编辑
                    </a>
                  </div>
                  <div v-if="item.chapterFlag == 2">
                    <a :href="'/note/add?id='+item.id" target="_blank" class="mr3 green"><i
                        class="iconfont icon-bianji mr3"></i>编辑
                    </a>
                  </div>
                  <a @click.prevent="handleCopyData(item)"  class="mr3 yellow pointer"><i
                      class="iconfont icon-fuzhi mr3"></i>复制
                  </a>
                  <a @click.prevent="handleUserDialog(item)"  class="green pointer"><i
                      class="iconfont icon-bianji mr3"></i>授权
                  </a>
                  <div>
                    <n-popconfirm
                        positive-text="确定"
                        negative-text="取消"
                        @positive-click="handleDelTemplate(item,index)"
                    >
                      <template #trigger>
                        <span class="comment-action-del pointer red"><i class="iconfont icon-shanchu2"></i>删除</span>
                      </template>
                      你确定删除吗？
                    </n-popconfirm>
                  </div>
                </div>
              </td>
            </tr>
            <tr v-if="item.expand">
              <td colspan="20">
                <div class="flex align-center justify-between">
                  <span class="mr10">编号：{{item.id}}</span>
                  栏目IDS：<input v-model="item.channelIds" @blur="handleUpdateStatus(item,'channel_ids','channelIds')" style="flex: 1;margin-left: 15px" class="binput  fw" placeholder="请填写"/>
                  描述：<input v-model="item.description" @blur="handleUpdateStatus(item,'description','description')" style="flex: 1;margin-left: 15px" class="binput  fw" placeholder="请填写"/>
                </div>
              </td>
            </tr>
          </template>
          <tr>
            <td colspan="20">
              <k-empty :show="total == 0"></k-empty>
              <div @click="handleLoadMore" v-if="total > queryParams.pageSize && queryParams.pageNo < pages"
                   class="flex justify-center pointer">加载更多({{ total || 0 }})
              </div>
              <div v-if="total > queryParams.pageSize && queryParams.pageNo == pages"
                   class="flex justify-center c999 mt20 mb20">没有更多了
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <ksd-user-dialog ref="userDialogRef"></ksd-user-dialog>
  </div>
</template>
<script setup>
const total = ref(0)
const pages = ref(0)
const loadingFlag = ref(false)
const dataList = ref([])
const channelList = ref([])
const categoryList = ref([])
const queryParams = reactive({
  channelId: 0,
  categoryId: 0,
  keyword: "",
  status:-1,
  notetype: 0,  // 基础课 2进阶课 3 实战小册 4 面试课
  pageNo: 1,
  pageSize: 100,
  orderNum: 0 // 0 最新  1 最热 2 最后更新 3sorted
})
const userDialogRef = ref({})

const handleCopyData = async(item)=>{
  await useCopyAdminNoteApi(item.id)
  useMessage().success("复制成功")
  handleSearchCategory()
}


const handleUserDialog = (item)=>{
  userDialogRef.value.handleOpen(item,"note")
}

const handleSearchCategory = async () => {
  queryParams.pageNo = 1
  dataList.value = []
  handleLoadData()
}

const handleChangeSelect = async (item, column1, field,field2) => {
  item.categoryListFilter = categoryList.value.filter(cc=>cc.channelId==item.channelId)
  item[field2] = channelList.value.find(c=>c.id==item[field]).title
  handleUpdateStatus(item, column1, field,'channel_name',field2)
}
const handleChangeSelect2= async (item, column1, field,field2) => {
  item[field2] = categoryList.value.find(c=>c.id==item[field]).title
  handleUpdateStatus2(item, column1, field,'category_name',field2)
}

const handleUpdateStatus2 = async (item, column1, field,column2,field2) => {
  await useUpdateAdminNoteManyApi({
    id: item.id,
    field: column1,
    value: item[field],
    field2: column2,
    value2: item[field2]
  })
  useMessage().success("操作成功!!!")
}

const handleUpdateStatus = async (item, column1, field) => {
  if(field=="title" && item.description == ""){
    item.description = "通过本次课程你可以掌握和学习"+item.title
    await useUpdateAdminNoteApi({
      id: item.id,
      field: "description",
      value: item["description"],
    })
  }
  await useUpdateAdminNoteApi({
    id: item.id,
    field: column1,
    value: item[field],
  })
  useMessage().success("操作成功!!!")
}

const handleLoadData = async () => {
  loadingFlag.value = true
  await handleLoadChannel()
  await handleLoadCategories()
  const resp = await useLoadAdminNoteListApi(queryParams)
  var records = resp.data.records.map(c=>{
    c.categoryListFilter = categoryList.value.filter(cc=>cc.channelId==c.channelId)
    c.expand = false
    return c
  })
  dataList.value = dataList.value.concat(records)
  total.value = resp.data.total
  pages.value = resp.data.pages
  loadingFlag.value = false
}

const handleLoadMore = () => {
  queryParams.pageNo++
  handleLoadData()
}

const handleLoadCategories = async () => {
  const resp = await useLoadNoteCategoriesAllApi()
  categoryList.value = resp.data
}


const handleLoadChannel = async () => {
    const resp = await useLoadChannelList()
    channelList.value = resp.data
}

const handleDelTemplate = async (item,index) => {
  await useLoginDialog()
  await useDelAdminNoteApi(item.id)
  dataList.value.splice(index,1)
  total.value--
}

definePageMeta({
  middleware: ["md-admin"],
  layout: "nindex",
})

onMounted(async () => {
  handleLoadData()
})

</script>

<style lang="scss">
.n-upload-file-list.n-upload-file-list--grid{
  grid-template-columns:repeat(auto-fill, 64px)
}
.n-upload-file-list .n-upload-file.n-upload-file--image-card-type,
.n-upload-trigger.n-upload-trigger--image-card{
  width: 64px;
  height: 32px;
}
._land_23vdq_1 {
  display: flex;
  justify-content: center;
  width: 100%;
}


._land-container_23vdq_7 {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 80px 8%;
  max-width: 1280px;
  padding: 40px 40px 30px
}

._land-img_23vdq_14 {
  grid-column: span 7;
  max-width: 100%;
  object-fit: contain
}


._land-text_23vdq_11 {
  display: flex;
  flex-direction: column;
  grid-column: span 5;
  align-items: flex-start;
  justify-content: center
}

._land-text_23vdq_11 > section {
  font-weight: bold;
  font-size: 28px;
  color: var(--text-color-primary, var(--text-color-primary, #222529))
}

._land-text_23vdq_11 > ul {
  padding: 0;
  margin: 0;
  margin-top: 28px;
  margin-bottom: 48px;
  margin-left: 20px;
  line-height: 200%;
  list-style: disc;
  color: #666;
  font-size: 16px;
}

.gda-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
}

.gdesign-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-size: 20px;
}

.gda-btn > i, .gda-btn > span {
  display: inline-flex;
  pointer-events: none;
  line-height: 1;
}

.k-data-table-table th {
  background: #fafafc;
}

.k-data-table-table td,
.k-data-table-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(239, 239, 245, 1);
}
</style>
